<#assign s=JspTaglibs["/WEB-INF/tlds/struts-tags.tld"]/>
<script type="text/javascript" src="${request.contextPath}/static/js/common/codemirror/mode/xml/xml.js"></script>
<script language="JavaScript" type="text/javascript" src="http://code.jquery.com/jquery-latest.js"> </script>
<script type="text/javascript">
    $(function(){
        window.editor = CodeMirror.fromTextArea(document.getElementById('code'), {
            mode: "text/html",
            indentWithTabs: true,
            smartIndent: true,
            lineNumbers: true,
            matchBrackets : true,
            autofocus: true
        });

        window.editor = CodeMirror.fromTextArea(document.getElementById('code1'), {
            indentWithTabs: true,
            smartIndent: true,
            lineNumbers: true,
            matchBrackets : true,
            autofocus: true
        });


        var HTMLFormat = (function() {
            function style_html(html_source, indent_size, indent_character, max_char) {
                var Parser, multi_parser;

                function Parser() {

                    this.pos = 0;
                    this.token = '';
                    this.current_mode = 'CONTENT';
                    this.tags = {
                        parent: 'parent1',
                        parentcount: 1,
                        parent1: ''
                    };
                    this.tag_type = '';
                    this.token_text = this.last_token = this.last_text = this.token_type = '';


                    this.Utils = {
                        whitespace: "\n\r\t ".split(''),
                        single_token: 'br,input,link,meta,!doctype,basefont,base,area,hr,wbr,param,img,isindex,?xml,embed'.split(','),
                        extra_liners: 'head,body,/html'.split(','),
                        in_array: function(what, arr) {
                            for (var i = 0; i < arr.length; i++) {
                                if (what === arr[i]) {
                                    return true;
                                }
                            }
                            return false;
                        }
                    }

                    this.get_content = function() {
                        var char = '';
                        var content = [];
                        var space = false;
                        while (this.input.charAt(this.pos) !== '<') {
                            if (this.pos >= this.input.length) {
                                return content.length ? content.join('') : ['', 'TK_EOF'];
                            }

                            char = this.input.charAt(this.pos);
                            this.pos++;
                            this.line_char_count++;


                            if (this.Utils.in_array(char, this.Utils.whitespace)) {
                                if (content.length) {
                                    space = true;
                                }
                                this.line_char_count--;
                                continue;
                            } else if (space) {
                                if (this.line_char_count >= this.max_char) {
                                    content.push('\n');
                                    for (var i = 0; i < this.indent_level; i++) {
                                        content.push(this.indent_string);
                                    }
                                    this.line_char_count = 0;
                                } else {
                                    content.push(' ');
                                    this.line_char_count++;
                                }
                                space = false;
                            }
                            content.push(char);
                        }
                        return content.length ? content.join('') : '';
                    }

                    this.get_script = function() {
                        var char = '';
                        var content = [];
                        var reg_match = new RegExp('\<\/script' + '\>', 'igm');
                        reg_match.lastIndex = this.pos;
                        var reg_array = reg_match.exec(this.input);
                        var end_script = reg_array ? reg_array.index : this.input.length;
                        while (this.pos < end_script) {
                            if (this.pos >= this.input.length) {
                                return content.length ? content.join('') : ['', 'TK_EOF'];
                            }

                            char = this.input.charAt(this.pos);
                            this.pos++;


                            content.push(char);
                        }
                        return content.length ? content.join('') : '';
                    }

                    this.record_tag = function(tag) {
                        if (this.tags[tag + 'count']) {
                            this.tags[tag + 'count']++;
                            this.tags[tag + this.tags[tag + 'count']] = this.indent_level;
                        } else {
                            this.tags[tag + 'count'] = 1;
                            this.tags[tag + this.tags[tag + 'count']] = this.indent_level;
                        }
                        this.tags[tag + this.tags[tag + 'count'] + 'parent'] = this.tags.parent;
                        this.tags.parent = tag + this.tags[tag + 'count'];
                    }

                    this.retrieve_tag = function(tag) {
                        if (this.tags[tag + 'count']) {
                            var temp_parent = this.tags.parent;
                            while (temp_parent) {
                                if (tag + this.tags[tag + 'count'] === temp_parent) {
                                    break;
                                }
                                temp_parent = this.tags[temp_parent + 'parent'];
                            }
                            if (temp_parent) {
                                this.indent_level = this.tags[tag + this.tags[tag + 'count']];
                                this.tags.parent = this.tags[temp_parent + 'parent'];
                            }
                            delete this.tags[tag + this.tags[tag + 'count'] + 'parent'];
                            delete this.tags[tag + this.tags[tag + 'count']];
                            if (this.tags[tag + 'count'] == 1) {
                                delete this.tags[tag + 'count'];
                            } else {
                                this.tags[tag + 'count']--;
                            }
                        }
                    }

                    this.get_tag = function() {
                        var char = '';
                        var content = [];
                        var space = false;

                        do {
                            if (this.pos >= this.input.length) {
                                return content.length ? content.join('') : ['', 'TK_EOF'];
                            }

                            char = this.input.charAt(this.pos);
                            this.pos++;
                            this.line_char_count++;

                            if (this.Utils.in_array(char, this.Utils.whitespace)) {
                                space = true;
                                this.line_char_count--;
                                continue;
                            }

                            if (char === "'" || char === '"') {
                                if (!content[1] || content[1] !== '!') {
                                    char += this.get_unformatted(char);
                                    space = true;
                                }
                            }

                            if (char === '=') {
                                space = false;
                            }

                            if (content.length && content[content.length - 1] !== '=' && char !== '>' && space) {
                                if (this.line_char_count >= this.max_char) {
                                    this.print_newline(false, content);
                                    this.line_char_count = 0;
                                } else {
                                    content.push(' ');
                                    this.line_char_count++;
                                }
                                space = false;
                            }
                            content.push(char);
                        } while (char !== '>');

                        var tag_complete = content.join('');
                        var tag_index;
                        if (tag_complete.indexOf(' ') != -1) {
                            tag_index = tag_complete.indexOf(' ');
                        } else {
                            tag_index = tag_complete.indexOf('>');
                        }
                        var tag_check = tag_complete.substring(1, tag_index).toLowerCase();
                        if (tag_complete.charAt(tag_complete.length - 2) === '/' || this.Utils.in_array(tag_check, this.Utils.single_token)) {
                            this.tag_type = 'SINGLE';
                        } else if (tag_check === 'script') {
                            this.record_tag(tag_check);
                            this.tag_type = 'SCRIPT';
                        } else if (tag_check === 'style') {
                            this.record_tag(tag_check);
                            this.tag_type = 'STYLE';
                        } else if (tag_check.charAt(0) === '!') {
                            if (tag_check.indexOf('[if') != -1) {
                                if (tag_complete.indexOf('!IE') != -1) {
                                    var comment = this.get_unformatted('-->', tag_complete);
                                    content.push(comment);
                                }
                                this.tag_type = 'START';
                            } else if (tag_check.indexOf('[endif') != -1) {
                                this.tag_type = 'END';
                                this.unindent();
                            } else if (tag_check.indexOf('[cdata[') != -1) {
                                var comment = this.get_unformatted(']]>', tag_complete);
                                content.push(comment);
                                this.tag_type = 'SINGLE';
                            } else {
                                var comment = this.get_unformatted('-->', tag_complete);
                                content.push(comment);
                                this.tag_type = 'SINGLE';
                            }
                        } else {
                            if (tag_check.charAt(0) === '/') {
                                this.retrieve_tag(tag_check.substring(1));
                                this.tag_type = 'END';
                            } else {
                                this.record_tag(tag_check);
                                this.tag_type = 'START';
                            }
                            if (this.Utils.in_array(tag_check, this.Utils.extra_liners)) {
                                this.print_newline(true, this.output);
                            }
                        }
                        return content.join('');
                    }

                    this.get_unformatted = function(delimiter, orig_tag) {
                        if (orig_tag && orig_tag.indexOf(delimiter) != -1) {
                            return '';
                        }
                        var char = '';
                        var content = '';
                        var space = true;
                        do {


                            char = this.input.charAt(this.pos);
                            this.pos++

                            if (this.Utils.in_array(char, this.Utils.whitespace)) {
                                if (!space) {
                                    this.line_char_count--;
                                    continue;
                                }
                                if (char === '\n' || char === '\r') {
                                    content += '\n';
                                    for (var i = 0; i < this.indent_level; i++) {
                                        content += this.indent_string;
                                    }
                                    space = false;
                                    this.line_char_count = 0;
                                    continue;
                                }
                            }
                            content += char;
                            this.line_char_count++;
                            space = true;


                        } while (content.indexOf(delimiter) == -1);
                        return content;
                    }

                    this.get_token = function() {
                        var token;

                        if (this.last_token === 'TK_TAG_SCRIPT') {
                            var temp_token = this.get_script();
                            if (typeof temp_token !== 'string') {
                                return temp_token;
                            }
                            //token = js_beautify(temp_token, this.indent_size, this.indent_character, this.indent_level);
                            //return [token, 'TK_CONTENT'];
                            return [temp_token, 'TK_CONTENT'];
                        }
                        if (this.current_mode === 'CONTENT') {
                            token = this.get_content();
                            if (typeof token !== 'string') {
                                return token;
                            } else {
                                return [token, 'TK_CONTENT'];
                            }
                        }

                        if (this.current_mode === 'TAG') {
                            token = this.get_tag();
                            if (typeof token !== 'string') {
                                return token;
                            } else {
                                var tag_name_type = 'TK_TAG_' + this.tag_type;
                                return [token, tag_name_type];
                            }
                        }
                    }

                    this.printer = function(js_source, indent_character, indent_size, max_char) {
                        this.input = js_source || '';
                        this.output = [];
                        this.indent_character = indent_character || ' ';
                        this.indent_string = '';
                        this.indent_size = indent_size || 2;
                        this.indent_level = 0;
                        this.max_char = max_char || 70;
                        this.line_char_count = 0;
                        for (var i = 0; i < this.indent_size; i++) {
                            this.indent_string += this.indent_character;
                        }

                        this.print_newline = function(ignore, arr) {
                            this.line_char_count = 0;
                            if (!arr || !arr.length) {
                                return;
                            }
                            if (!ignore) {
                                while (this.Utils.in_array(arr[arr.length - 1], this.Utils.whitespace)) {
                                    arr.pop();
                                }
                            }
                            arr.push('\n');
                            for (var i = 0; i < this.indent_level; i++) {
                                arr.push(this.indent_string);
                            }
                        }


                        this.print_token = function(text) {
                            this.output.push(text);
                        }

                        this.indent = function() {
                            this.indent_level++;
                        }

                        this.unindent = function() {
                            if (this.indent_level > 0) {
                                this.indent_level--;
                            }
                        }
                    }
                    return this;
                }




                multi_parser = new Parser();
                multi_parser.printer(html_source, indent_character, indent_size);
                while (true) {
                    var t = multi_parser.get_token();
                    multi_parser.token_text = t[0];
                    multi_parser.token_type = t[1];

                    if (multi_parser.token_type === 'TK_EOF') {
                        break;
                    }


                    switch (multi_parser.token_type) {
                        case 'TK_TAG_START':
                        case 'TK_TAG_SCRIPT':
                        case 'TK_TAG_STYLE':
                            multi_parser.print_newline(false, multi_parser.output);
                            multi_parser.print_token(multi_parser.token_text);
                            multi_parser.indent();
                            multi_parser.current_mode = 'CONTENT';
                            break;
                        case 'TK_TAG_END':
                            multi_parser.print_newline(true, multi_parser.output);
                            multi_parser.print_token(multi_parser.token_text);
                            multi_parser.current_mode = 'CONTENT';
                            break;
                        case 'TK_TAG_SINGLE':
                            multi_parser.print_newline(false, multi_parser.output);
                            multi_parser.print_token(multi_parser.token_text);
                            multi_parser.current_mode = 'CONTENT';
                            break;
                        case 'TK_CONTENT':
                            if (multi_parser.token_text !== '') {
                                multi_parser.print_newline(false, multi_parser.output);
                                multi_parser.print_token(multi_parser.token_text);
                            }
                            multi_parser.current_mode = 'TAG';
                            break;
                    }
                    multi_parser.last_token = multi_parser.token_type;
                    multi_parser.last_text = multi_parser.token_text;
                }
                return multi_parser.output.join('');
            }

            return function(data) {
                var dataHolder = ['__dataHolder_', [Math.random(), Math.random(), Math.random(), Math.random()].join('_').replace(/[^0-9]/g, '_'), '_'].join('_');
                var dataHolders = {};
                var index = 0;
                data = data.replace(/(\")(data:[^\"]*)(\")/g, function($0, $1, $2, $3) {
                    var name = dataHolder + index++;
                    dataHolders[name] = $2;
                    return $1 + name + $3;
                })
                data = style_html(data, 1, '\t', 0x10000000);
                data = data.replace(new RegExp(dataHolder + '[0-9]+', 'g'), function($0) {
                    return dataHolders[$0];
                });

                return data;
            }
        })();


        function createHTML(data){
            var children = data.childNodes;
            var ul = $('<ul>');
            $.each(children, function(index, node){
                if (node.nodeType==1)
                {
                    var li = $('<li>').appendTo(ul), str, attr='';
                    $.each(node.attributes, function(i, v){
                        attr += ' <em class="key">'+v.name+'</em>="<em class="value">'+v.value+'</em>"';
                    });
                    if (node.childNodes.length<=1)
                    {
                        str = '<b><'+node.tagName+attr+'></b><em>' + node.textContent + '</em><b></' + node.tagName + '></b>';
                        li.html(str);
                    }else{
                        str = '<b><'+node.tagName+attr+'></b>';
                        var p = $('<span>').html(str).prepend('<i>-</i>');
                        li.append(p).append(createHTML(node));
                        p.click(function(){
                            var i = p.find('i').eq(0);
                            if (i.text()=='-')
                            {
                                p.next().hide();
                                i.text('+');
                            }else{
                                p.next().show();
                                i.text('-');
                            }
                        });
                    }
                }
            });
            return ul;
        }

       var formattedHtml = HTMLFormat("<@s.property value="message.in" escapeHtml="false"/>);
        $('#qq').html(formattedHtml);

        window.editor = CodeMirror.fromTextArea(document.getElementById('qq'), {
            indentWithTabs: true,
            smartIndent: true,
            lineNumbers: true,
            matchBrackets : true,
            autofocus: true
        });

    });
</script>

<div class="example-box" style="padding-left:10px;padding-right:10px;">
    <div class="example-code">
        <div class="content-box box-toggle">
            <h3 class="content-box-header primary-bg">
                <span class="float-left">Axis请求信息详情</span>
                <a href="javascript:;" class="btn small hover-black float-right back-page" title="返回" style="margin-top: 10px;margin-right: 30px">
                    <i class="glyph-icon icon-reply"></i>
                </a>
            </h3>
            <div class="content-box-wrapper">
                <div class="tabs">
                    <ul>
                        <li>
                            <a title="基本信息" href="#tabs-1">
                                基本信息
                            </a>
                        </li>
                        <li>
                            <a title="请求内容" href="#tabs-2">
                                请求内容
                            </a>
                        </li>
                        <li>
                            <a title="返回结果" href="#tabs-3">
                                返回结果
                            </a>
                        </li>
                    </ul>
                    <div id="tabs-1">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-row">
                                    <div class="form-label col-md-3">
                                        <label for="">
                                            调用接口的远程地址：
                                        </label>
                                    </div>
                                    <div class="form-input col-md-9">
                                        <div class="append-left">
                                            <@s.textfield name="remoteAddr" value="%{message.remoteAddr}" readonly="true"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-row">
                                    <div class="form-label col-md-3">
                                        <label for="">
                                            返回类型：
                                        </label>
                                    </div>
                                    <div class="form-input col-md-9">
                                        <div class="append-left">
                                             <@s.textfield name="result" value="%{message.result.value}" readonly="true"/>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-row">
                                    <div class="form-label col-md-3">
                                        <label for="">
                                            调用类型：
                                        </label>
                                    </div>
                                    <div class="form-input col-md-9">
                                        <div class="append-left">
                                        <@s.textfield name="Type"  value="%{message.Type.value}" readonly="true"/>

                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div id="tabs-2">
                        <textarea id="code"  name="in" style="width:100%;height:300px;"  value="${message.in}"></textarea>

                        <textarea id="qq" ></textarea>
                    </div>

                    <div id="tabs-3">
                        <textarea id="code1"  name="out" style="width:100%;height:300px;"  value="${message.out}"></textarea>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>